<template>
    <div class="homeCategory">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar
                title="不凡"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        <div class="navbar">
            <van-tabs v-model="activeKey">
                <!-- 导航 -->
                <van-tab
                    v-for="(item, index) in categoryList"
                    :key="index"
                    :title="item.name"
                >
                    <!-- 内容 -->
                    <div class="homeCategory-wrapper">
                        <!-- 标题 -->
                        <div class="homeCategory-header">
                            <p>{{item.name}}</p>
                            <p>{{item.front_desc}}</p>
                        </div>
                        <ul class="list-items">
                            <div
                                class="list-item"
                                v-for="(val, index) in currentOne"
                                :key="index"
                                @click="toGoods(val.id)"
                            >
                                <img :src="val.list_pic_url" alt="">
                                <p>{{val.name}}</p>
                                <p>￥{{val.retail_price}}</p>
                            </div>
                            <div class="list-item moreGoods">
                            </div>
                        </ul>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>

import { getHomeSubListInfo, getHomeCategoryInfo } from '@/api/homeCategory/index'
import { mapState , mapMutations , mapActions , mapGetters} from 'vuex'

export default {
    data() {
        return {
            activeId: this.$route.query.id,
            activeKey: 0
        }
    },
    watch: {
        // activeKey改变进行异步请求
        activeKey(newval) {
            getHomeSubListInfo({categoryId: this.categoryList[newval].id})
            .then(res => {
                this.setCurrentOne(res)
            });
        }
    },
    methods: {
        // 返回
        onClickLeft() {
            this.$router.go(-1)
        },
        ...mapMutations({
            setCategoryList: 'homeCategory/setCategoryList',
            setCurrentOne: 'homeCategory/setCurrentOne',
        }),
        toGoods(id) {
            this.$router.push( { path: '/pages/goods', query: { id, } } )
        },
    },
    computed: {
        ...mapState({
            categoryList: state => state.homeCategory.categoryList,
            currentOne: state => state.homeCategory.currentOne,
        }),
    },
    created() {
        // 请求导航数据
        getHomeCategoryInfo({id: this.activeId})
        .then( res => {
            // 设置CategoryList
            this.setCategoryList(res)
            // 设置当前项索引
            this.activeKey = this.categoryList.findIndex(el => {
                return el.id == res.currentNav.id
            })
            getHomeSubListInfo({categoryId: this.categoryList[this.activeKey].id})
            .then(res => {
                this.setCurrentOne(res)
            });
        })
    },
}
</script>

<style lang="scss" scoped>
    .header{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9;
    }
    .navbar{
        background: #f4f4f4;
        width: 100%;
        margin-top: 1.226667rem;
        .homeCategory-wrapper{
            width: 100%;
            .homeCategory-header{
                width: 100%;
                height: 101px;
                background: #fff;
                text-align: center;
                p:nth-child(1){
                    padding-top: 24px;
                    font-size: .4rem;
                    color: #333;
                }
                p:nth-child(2){
                    font-size: .32rem;
                    color: #999;
                }
            }
            .list-items{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-evenly;
                margin-top: 6px;
                .list-item{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    margin-bottom: 6px;
                    width: 180px;
                    background: #fff;
                    text-align: center;
                    img{
                        width: 151px;
                        height: 151px;
                    }
                    p{
                        width: 180px;
                        margin: 0 0 12px 0;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    p:last-child {
                        color: #9c3232;
                    }
                }
                .moreGoods{
                    height: 0;
                }
            }
        }

    }
</style>
